<template>
  <div class="totality">
    <div class="echarts">
      <div class="echarts-title">
        <img src="../../assets/img/titile.png" alt="" />
        <span>前海控股安全指数</span>
      </div>
      <div class="echarts-contant" id="safetyIndex"></div>
    </div>
    <div class="echarts">
      <div class="echarts-title">
        <img src="../../assets/img/titile.png" alt="" />
        <span>平均安全隐患数量</span>
      </div>
      <div class="echarts-contant" id="dangerNum"></div>
    </div>
    <!-- <div class="echarts">
      <div class="echarts-title">
        <img src="../../assets/img/titile.png" alt="" />
        <span>隐患比例示意图</span>
      </div>
      <div class="echarts-contant" id="proportionLine"></div>
    </div> -->
    <div class="echarts circle">
      <div class="echarts-title">
        <img src="../../assets/img/titile.png" alt="" />
        <span>隐患比例示意图</span>
        <span class="selectTimeText">{{selectTimeText}}</span>
        <img
          src="../../assets/img/selectTime.png"
          class="selectTimeIcon"
          @click="openTimeSelect"
        />
      </div>
      <div class="echarts-count">
        <span>{{ RiskCount }}</span>
        <span>总数</span>
      </div>
      <div class="echarts-contant" id="proportionCake"></div>
      <div class="echarts-detail">
        <div
          class="echarts-detail-item"
          v-for="(item, index) in detailData"
          :key="index"
        >
          <div class="echarts-detail-item-top">
            <span
              class="echarts-detail-item-top-circle"
              :style="{ background: item.color }"
            ></span>
            <span class="echarts-detail-item-top-title">{{ item.title }}</span>
          </div>
          <div class="echarts-detail-item-bottom">
            <span class="echarts-detail-item-bottom-percent"
              >{{ item.percent }}%</span
            >
            <span
              class="echarts-detail-item-bottom-num"
              :style="{ color: item.color }"
              >{{ item.num }}</span
            >
            <span class="echarts-detail-item-bottom-unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    <popup v-model="showTimeSelect" :show-mask="false">
      <div class="timeHeader">
        <span class="timeHeader-cancel" @click="cancel">取消</span>
        <div @click="selectTab($event)" class="timeHeader-select">
          <span id="year" style="color:#4D86FF;font-weight:bold">年份</span>
          <span id="month">月份</span>
          <span id="Quarterly">季度</span>
        </div>

        <span class="timeHeader-confirm" @click="confirm">完成</span>
      </div>
      <div v-show="currentTab == 'year'">
        <picker
          :data="years"
          v-model="currentYear"
          @on-change="change1"
        ></picker>
      </div>
      <div v-show="currentTab == 'month'">
        <picker
          :data="months"
          v-model="currentMonth"
          @on-change="change2"
        ></picker>
      </div>
      <div v-show="currentTab == 'Quarterly'">
        <picker
          :data="Quarterlys"
          v-model="currentQuarterly"
          @on-change="change3"
        ></picker>
      </div>
    </popup>
  </div>
</template>
<script>
import echarts from "echarts";
// 配置事件选择器年、月、季度
let years = [];
let date = new Date();
for (var i = 1995; i <= date.getFullYear(); i++) {
  years.push({
    name: i + "年",
    value: i + ""
  });
}
let months = [];
for (var i = 1; i < 13; i++) {
  months.push({
    name: i + "月",
    value: i + ""
  });
}
let Quarterlys = [];
for (var i = 1; i < 5; i++) {
  Quarterlys.push({
    name: i + "季度",
    value: i + ""
  });
}
export default {
  name: "totality",
  data() {
    return {
      detailData: [],
      showTimeSelect: false,
      years: [years],
      months: [months],
      Quarterlys: [Quarterlys],
      currentYear: ["2020"],
      currentMonth: [""],
      currentQuarterly: [""],
      currentTab: "year",
      currentSelecet: "",
      color: [
        "#399AEA",
        "#5AD8E5",
        "#ADDD52",
        "#00D186",
        "#FFCB27",
        "#FF9429",
        "#FF4A4A",
        "#F596AA",
        "#5f27cd",
        "#01a3a4",
        "#341f97",
        "#8395a7",
        "#222f3e",
        "#6D214F",
        "#BDC581",
        "#EAB543",
        "#FC427B",
        "#32ff7e",
        "#fffa65",
        "#ffcccc",
        "#cd84f1",
        "#2c2c54",
        "#0be881",
        "#ff3f34"
      ],
      RiskCount: 0,
      selectTimeText: ""
    };
  },
  props: {
    title: {
      type: String,
      require: true
    }
  },
  mounted() {
    this.getSafetyIndex();
    this.getdangerNum();
    this.getRiskRatio();
    let Y = this.currentYear[0] ? this.currentYear[0] + "年" : "";
    let Q = this.currentQuarterly[0]
      ? "第" + this.currentQuarterly[0] + "季度"
      : "";
    let M = this.currentMonth[0] ? "第" + this.currentMonth[0] + "月" : "";
    this.selectTimeText = Y + Q + M;
  },
  methods: {
    // 获取隐患比例
    getRiskRatio() {
      let params =
        '{"_method": "PMHSE_ECHARTS.selectHiddenNum","checkYear":"' +
        this.currentYear[0] +
        '","checkQuarter":"' +
        this.currentQuarterly[0] +
        '","checkMonth":"' +
        (this.currentMonth[0] < 10 && this.currentMonth[0] != ""
          ? "0" + this.currentMonth[0]
          : this.currentMonth[0]) +
        '","proId":"0"}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      }).then(res => {
        if (res.data.list.length > 0) {
          this.RiskCount = 0;
          // 处理图例数据
          this.detailData = [];
          let totle = 0;
          res.data.list.forEach(item => {
            totle += parseInt(item.NUM);
          });
          // echart数据处理
          let colors = this.color.slice(0, res.data.list.length);
          let datas = [];
          res.data.list.map((item, index) => {
            this.RiskCount += parseInt(item.NUM);
            datas.push({
              value: item.NUM,
              name: item.FATHERCLASS
            });
            this.detailData.push({
              title: item.FATHERCLASS,
              color: this.color[index],
              percent: ((item.NUM / totle) * 100).toFixed(1),
              num: item.NUM,
              unit: "个"
            });
          });
          this.echartsInit(datas, colors);
        }
      });
    },
    // 初始化默认一年时间戳
    handleTimePoint() {
      let date = new Date();
      let end =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1);
      let start =
        date.getFullYear() -
        1 +
        "-" +
        (date.getMonth() < 10 ? "0" + date.getMonth() : date.getMonth());
      return {
        startTime: start,
        endTime: end
      };
    },
    // 获取安全隐患统计
    getdangerNum() {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ECHARTS.selectAverHidden","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"0"}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      }).then(res => {
        if (res.data.list.length > 0) {
          let datas = res.data.list;
          let dateList = [];
          for (let i = 0, len = datas.length; i < len; i++) {
            if (dateList.indexOf(datas[i].CHECKMY) == -1) {
              dateList.push(datas[i].CHECKMY);
            }
          }
          let valueList = [];
          for (let i = 0, len = dateList.length; i < len; i++) {
            let arr = datas.filter(item => {
              return item.CHECKMY == dateList[i];
            });
            let s = 0;
            arr.forEach(item => {
              s += parseInt(item.NUM);
            });
            valueList.push((s / arr.length).toFixed(2));
          }
          this.dangerNumInit(dateList, valueList);
        }
      });
    },
    // 获取安全指数统计
    getSafetyIndex() {
      let timePont = this.handleTimePoint();
      let params =
        '{"_method": "PMHSE_ECHARTS.selectAvgScore","startTime":"' +
        timePont.startTime +
        '","endTime":"' +
        timePont.endTime +
        '","proId":"0"}';
      this.$ajax({
        method: "post",
        url: this.COMMON_URL,
        data: { FixJSON: params },
        async: false
      }).then(res => {
        if (res.data.list.length > 0) {
          let datas = res.data.list;
          let X = [];
          let Y = date.getFullYear();
          let M = date.getMonth();
          for (var i = 0; i < 13; i++) {
            if (M < 10) {
              X.push(Y - 1 + "-0" + M);
              // M += 1;
            } else if (M >= 10 && M < 13) {
              X.push(Y - 1 + "-" + M);
              // M += 1;
            } else if (M >= 13 && M < 22) {
              X.push(Y + "-0" + (M - 12));
              // M += 1;
            } else if (M >= 22) {
              X.push(Y + "-" + (M - 12));
            }
            M += 1;
          }
          let values = [
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null
          ];
          for (var i = 0, len = values.length; i < len; i++) {
            datas.forEach(item => {
              if (item.CHECKMY == X[i]) {
                values[i] = parseFloat(item.NUM).toFixed(2);
              }
            });
          }
          this.safetyIndexInit(X, values);
        }
      });
    },
    // 打开时间选择区域
    openTimeSelect() {
      this.showTimeSelect = true;
    },
    // 选择标签
    selectTab(e) {
      if (e.target.id == "") {
        return false;
      }
      let year = document.getElementById("year");
      let month = document.getElementById("month");
      let Quarterly = document.getElementById("Quarterly");
      this.currentTab = e.target.id;
      console.log(this.currentTab);
      if (this.currentTab == "year") {
        year.style.color = "#4D86FF";
        year.style.fontWeight = "600";
        month.style.color = "#191919";
        month.style.fontWeight = "500";
        Quarterly.style.color = "#191919";
        Quarterly.style.fontWeight = "500";
        // this.datas = years;
      } else if (this.currentTab == "month") {
        year.style.color = "#191919";
        year.style.fontWeight = "500";
        month.style.color = "#4D86FF";
        month.style.fontWeight = "600";
        Quarterly.style.color = "#191919";
        Quarterly.style.fontWeight = "500";
        // this.datas = months;
      } else {
        year.style.color = "#191919";
        year.style.fontWeight = "500";
        month.style.color = "#191919";
        month.style.fontWeight = "500";
        Quarterly.style.color = "#4D86FF";
        Quarterly.style.fontWeight = "600";
        // this.datas = Quarterlys;
      }
    },
    change1() {
      console.log(this.currentYear);
      this.currentQuarterly = [""];
      this.currentMonth = [""];
    },
    change2() {
      console.log(this.currentMonth);
      if (this.currentMonth < 4) {
        this.currentQuarterly = ["1"];
      } else if (this.currentMonth >= 4 && this.currentMonth < 7) {
        this.currentQuarterly = ["2"];
      } else if (this.currentMonth >= 7 && this.currentMonth < 10) {
        this.currentQuarterly = ["3"];
      } else {
        this.currentQuarterly = ["4"];
      }
    },
    change3() {
      console.log(this.currentQuarterly);
      this.currentMonth = [""];
    },
    confirm() {
      console.log(111);
      this.showTimeSelect = false;

      this.currentSelecet =
        this.currentYear[0] +
        "years " +
        this.currentMonth +
        "month " +
        this.currentQuarterly +
        "quarterly";
      this.getRiskRatio();
      let Y = this.currentYear[0] ? this.currentYear[0] + "年" : "";
      let Q = this.currentQuarterly[0]
        ? "第" + this.currentQuarterly[0] + "季度"
        : "";
      let M = this.currentMonth[0] ? "第" + this.currentMonth[0] + "月" : "";
      this.selectTimeText = Y + Q + M;
      console.log(this.currentSelecet);
    },
    cancel() {
      this.showTimeSelect = false;
      this.currentSelecet = "";
    },
    // 安全指数图表初始化
    safetyIndexInit(X, value) {
      var safetyIndex = echarts.init(document.getElementById("safetyIndex"));
      var option1 = {
        tooltip: {
          trigger: "axis",
          formatter:
            "<div style:'background:#FFFFFF'>{b} : <br/>前海控股安全指数: {c}</div>"
        },
        xAxis: {
          type: "category",
          data: X,
          axisTick: {
            show: true //不显示坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#f4f4f4"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999", //这里用参数代替了
              fontSize: 8
            },
            rotate: 45
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          axisLine: {
            show: false //不显示坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999" //这里用参数代替了
            }
          }
        },
        series: [
          {
            data: value,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#6495FA",
              borderColor: "#6495FA"
            },
            connectNulls: true
          }
        ]
      };
      safetyIndex.setOption(option1);
    },
    // 安全隐患图表初始化
    dangerNumInit(X, value) {
      var dangerNum = echarts.init(document.getElementById("dangerNum"));
      var option1 = {
        tooltip: {
          trigger: "axis",
          formatter:
            "<div style:'background:#FFFFFF'>{b} : <br/>平均安全隐患数量: {c}</div>"
        },
        xAxis: {
          type: "category",
          data: X,
          axisTick: {
            show: true //不显示坐标轴刻度线
          },
          axisLine: {
            lineStyle: {
              color: "#f4f4f4"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999", //这里用参数代替了
              fontSize: 8
            },
            rotate: 45
          }
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false //不显示坐标轴刻度线
          },
          axisLine: {
            show: false //不显示坐标轴线
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#F4F4F4"],
              width: 1,
              type: "solid"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#999999" //这里用参数代替了
            }
          }
        },
        series: [
          {
            data: value,
            type: "line",
            symbolSize: 6,
            itemStyle: {
              color: "#2FC4C4",
              borderColor: "#2FC4C4"
            }
          }
        ]
      };
      dangerNum.setOption(option1);
    },
    // echart初始化
    echartsInit(datas, colors) {
      var proportionCake = echarts.init(
        document.getElementById("proportionCake")
      );

      var option2 = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: colors,
        series: [
          {
            name: "隐患名称",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: false,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: datas
          }
        ]
      };

      // proportionLine.setOption(option1);
      proportionCake.setOption(option2);
    }
  }
};
</script>
<style lang="less" scoped>
.totality {
}
.echarts {
  margin-top: 8px;
  width: 100%;
  height: 221px;
  background: #fff;
  position: relative;
  overflow: hidden;
  &-title {
    display: flex;
    align-items: center;
    line-height: 1;
    padding-top: 14px;
    position: relative;
    img {
      width: 18px;
      height: 13px;
      margin-left: 15px;
      margin-top: 2px;
    }
    span {
      font-size: 16px;
      font-family: PingFang SC Semibold, PingFang SC Semibold-Semibold;
      font-weight: 600;
      color: #262a34;
      margin-left: 5px;
    }
    .selectTimeIcon {
      width: 24px;
      height: 24px;
      position: absolute;
      right: 18px;
    }
    .selectTimeText {
      position: absolute;
      right: 45px;
      font-size: 12px;
      font-family: PingFang SC Regular, PingFang SC Regular-Regular;
      font-weight: 400;
      color: #262a34;
    }
  }
  &-content {
  }
  &-count {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 110px;
    align-items: center;
    justify-content: center;
    span:nth-child(1) {
      font-size: 24px;
      font-family: Roboto Medium, Roboto Medium-Medium;
      font-weight: 500;
      color: #191919;
    }
    span:nth-child(2) {
      font-size: 14px;
      font-family: Roboto Medium, Roboto Medium-Medium;
      font-weight: 500;
      color: #b3b5ba;
    }
  }
  &-detail {
    display: flex;
    flex-wrap: wrap;
    margin-top: 190px;
    &-item {
      width: 50%;
      padding-right: 20px;
      box-sizing: border-box;
      margin-top: 18px;
      &-top {
        display: flex;
        align-items: center;
        &-circle {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          margin-left: 45px;
        }
        &-title {
          font-size: 14px;
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          color: #999999;
          margin-left: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      &-bottom {
        display: flex;
        justify-content: center;
        align-items: center;
        &-percent {
          display: block;
          width: 40px;
          font-size: 18px;
          font-family: Roboto Medium, Roboto Medium-Medium;
          font-weight: 500;
          color: #191919;
          margin-left: 50px;
        }
        &-num {
          font-size: 18px;
          font-family: Roboto Medium, Roboto Medium-Medium;
          font-weight: 500;
          margin-left: 19px;
        }
        &-unit {
          font-size: 12px;
          font-family: PingFang SC Regular, PingFang SC Regular-Regular;
          font-weight: 400;
          color: #999999;
          margin-left: 6px;
        }
      }
    }
    &-item:nth-child(even) {
      padding-right: 53px;
      box-sizing: border-box;
      .echarts-detail-item-top-circle {
        margin-left: 30px;
      }
    }
  }
}
.circle {
  height: auto;
  padding-bottom: 30px;
}
// echart 图表
#safetyIndex,
#dangerNum {
  width: 400px;
  height: 240px;
  position: absolute;
  top: 0;
}
#proportionCake {
  width: 375px;
  height: 220px;
  position: absolute;
  top: 30px;
}
// 时间选择器
.timeHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 41px;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
  &-cancel {
    margin-left: 15px;
  }
  &-confirm {
    margin-right: 15px;
    color: #4d86ff;
  }
  &-select {
    width: 210px;
    display: flex;
    justify-content: space-around;
    span {
      width: 60px;
      text-align: center;
    }
  }
}
</style>
